<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">运营状态概览</h2>
      <!-- <button class="text-primary text-sm hover:underline" @click="viewAllResources">查看全部</button> -->
    </div>
    <div class="p-4" v-if="yue">
      <div class="grid grid-cols-2 gap-3">

        <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 transition-colors">
          <div class="flex justify-between items-start">
            <div>
              <div class="text-sm text-gray-500">进行中的订单</div>
              <div class="stat-value text-gray-800 mt-1">{{ yue["进行中"].currentMonthCount }}</div>
            </div>
            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
              <i class="fa fa-server"></i>
            </div>
          </div>
          <div class="flex items-center mt-2 text-xs">
            <span class="flex items-center" :class="[{'text-danger':yue['进行中'].trend=='+'},{'text-success':yue['进行中'].trend!='+'}]">
              <i class="fa  mr-1" :class="[{'fa-arrow-up':yue['进行中'].trend=='+'},{'fa-arrow-down':yue['进行中'].trend!='+'}]"></i>{{ yue['进行中'].growthRate }}
            </span>
            <span class="text-gray-500 ml-1">较上月</span>
          </div>
        </div>

        <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 transition-colors">
          <div class="flex justify-between items-start">
            <div>
              <div class="text-sm text-gray-500">已完成订单</div>
              <div class="stat-value text-gray-800 mt-1">{{ yue["已完成"].currentMonthCount }}</div>
            </div>
            <div class="w-8 h-8 rounded-full bg-info/10 flex items-center justify-center text-info">
              <i class="fa fa-database"></i>
            </div>
          </div>
          <div class="flex items-center mt-2 text-xs">
            <span class="flex items-center" :class="[{'text-danger':yue['已完成'].trend=='+'},{'text-success':yue['已完成'].trend!='+'}]">
              <i class="fa  mr-1" :class="[{'fa-arrow-up':yue['已完成'].trend=='+'},{'fa-arrow-down':yue['已完成'].trend!='+'}]"></i>{{ yue['已完成'].growthRate }}
            </span>
            <span class="text-gray-500 ml-1">较上月</span>
          </div>
        </div>




        <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 transition-colors">
          <div class="flex justify-between items-start">
            <div>
              <div class="text-sm text-gray-500">本月交易金额</div>
              <div class="stat-value text-gray-800 mt-1">{{ yue["支出金额"].currentMonthCount }}</div>
            </div>
            <div class="w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center text-warning">
              <i class="fa fa-bell"></i>
            </div>
          </div>
          <div class="flex items-center mt-2 text-xs">
            <span class="flex items-center" :class="[{'text-danger':yue['支出金额'].trend=='+'},{'text-success':yue['支出金额'].trend!='+'}]">
              <i class="fa  mr-1" :class="[{'fa-arrow-up':yue['支出金额'].trend=='+'},{'fa-arrow-down':yue['支出金额'].trend!='+'}]"></i>{{ yue['支出金额'].growthRate }}
            </span>
            <span class="text-gray-500 ml-1">较上月</span>
          </div>
          <!-- <div class="flex items-center mt-2 text-xs text-warning">
            <i class="fa fa-exclamation-circle mr-1"></i>
            <span>需要处理</span>
          </div> -->
        </div>

        <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 transition-colors">
          <div class="flex justify-between items-start">
            <div>
              <div class="text-sm text-gray-500">今日活跃度</div>
              <div class="stat-value text-gray-800 mt-1">{{ yue["操作数量"].currentMonthCount }}</div>
            </div>
            <div class="w-8 h-8 rounded-full bg-success/10 flex items-center justify-center text-success">
              <i class="fa fa-exchange"></i>
            </div>
          </div>
          <div class="flex items-center mt-2 text-xs">
            <span class="flex items-center" :class="[{'text-danger':yue['操作数量'].trend=='+'},{'text-success':yue['操作数量'].trend!='+'}]">
              <i class="fa  mr-1" :class="[{'fa-arrow-up':yue['操作数量'].trend=='+'},{'fa-arrow-down':yue['操作数量'].trend!='+'}]"></i>{{ yue['操作数量'].growthRate }}
            </span>
            <span class="text-gray-500 ml-1">较昨日</span>
          </div>
        </div>
        


      </div>
    </div>
  </div>
</template>

<script>
// import {  getBalance,comparedLastMonth } from "@/api/home/home";

export default {
  data() {
    return {
      yue:null,
    }
  },
    created() {
    this.getInfo()

  },
  methods: {
        getInfo() {
          comparedLastMonth().then(response => {
          console.log("comparedLastMonth",response)
          this.yue = response.data;
        });
    
    },
    viewAllResources() {
      // 查看全部资源的逻辑
      console.log('查看全部资源');
      // 实际应用中可以添加路由跳转或弹窗逻辑
    }
  }
}
</script>